<%--
  Created by IntelliJ IDEA.
  User: 柚木
  Date: 2022/12/28
  Time: 0:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/includePage.css">
    <link rel="stylesheet" href="css/userManagePage.css">
    <script src="https://kit.fontawesome.com/e91f25b25e.js" crossorigin="anonymous"></script>
    <title>图书管理系统-用户管理</title>
</head>

<%@ include file="IncludePage.jsp" %>

<%--用户筛选--%>
<div class="user-screen">
    <div class="status-comboBox">
        <select name="" class="comboBox" id="status-comboBox" >
            <option id="all-user" selected = selected>全部</option>
            <option id="user-status">用户</option>
            <option id="manager-status">管理员</option>
        </select>
    </div>
    <div class="screen-btns">
        <button class="btn screen-btn gray" id="btn-new">新增</button>
        <button class="btn screen-btn gray" id="btn-reset">重置</button>
    </div>
    <div class="username-search">
        <input type="text" class="search-input" id="username-search-input" placeholder="请输入用户名">
        <button class="btn search-btn" id="username-search-btn" >搜索</button>
    </div>
    <div class="studentId-search">
        <input type="text" class="search-input" id="studentId-search-input" placeholder="请输入学号">
        <button class="btn search-btn" id="studentId-search-btn" >搜索</button>
    </div>
</div>
<%--搜索框自动补全--%>
<div class="search-auto-complete username" id="auto-complete">
    <ul class="auto-complete-list" id="username-auto-complete-list">
        <li data-username = "张三">张三</li>
    </ul>
</div>
<div class="search-auto-complete studentId" id="auto-complete">
    <ul class="auto-complete-list" id="studentId-auto-complete-list">
        <li data-username = "8209210299">82109210299</li>
    </ul>
</div>




    <%--添加用户--%>
    <div class="add-user" id="add-user-form">
        <div class="user-add-item">
            <label class="add-title">编号</label>
            <input type="text" class="add-input" placeholder="请输入编号">
        </div>
        <div class="user-add-item">
            <label class="add-title">用户名</label>
            <input type="text" class="add-input" placeholder="请输入用户名">
        </div>
        <div class="user-add-item">
            <label class="add-title">密码</label>
            <input type="text" class="add-input" placeholder="请输入密码">
        </div>
        <div class="user-add-item">
            <label class="add-title">学号</label>
            <input type="text" class="add-input" placeholder="请输入学号">
        </div>
        <div class="user-add-item">
            <label class="add-title">身份</label>
            <input type="radio" value="0" name="status" class="add-radio">用户
            <input type="radio" value="1" name="status" class="add-radio">管理员
        </div>
        <div class="user-add-buttons">
            <button class="btn add-user-btn gray" id="confirm-add-btn">确认添加</button>
            <button class="btn add-user-btn gray" id="close-add-form-btn">关闭</button>
        </div>
    </div>

    <%--编辑用户--%>
    <div class="edit-user" id="edit-user-form">
        <div class="user-edit-item">
            <label>编号</label>
            <input type="text" class="edit-input" id="userId" placeholder="请输入编号">
        </div>
        <div class="user-edit-item">
            <label>用户名</label>
            <input type="text" class="edit-input" id="username" placeholder="请输入用户名">
        </div>
        <div class="user-edit-item">
            <label>密码</label>
            <input type="text" class="edit-input" id="password" placeholder="请输入密码">
        </div>
        <div class="user-edit-item">
            <label>学号</label>
            <input type="text" class="edit-input" id="studentId" placeholder="请输入学号">
        </div>
        <div class="user-edit-item">
            <label>身份</label>
            <input type="radio" name="status" class="edit-radio" id="user-radio">用户
            <input type="radio" name="status" class="edit-radio" id="manager-radio">管理员
        </div>
        <div class="user-edit-buttons">
            <button class="btn edit-user-btn gray" id="confirm-edit-btn">确认修改</button>
            <button class="btn edit-user-btn gray" id="close-edit-form-btn">关闭</button>
        </div>
    </div>

    <%--用户表单--%>
    <div class="user-table">
        <table class="table" id="user-table">
            <tr class="table-title">
                <th class="col1">编号</th>
                <th class="col2">用户名</th>
                <th class="col3">密码</th>
                <th class="col4">学号</th>
                <th class="col5">身份</th>
                <th class="col6">操作</th>
            </tr>
<%--            <tr id="table-item">--%>
<%--                <td>01</td>--%>
<%--                <td>张三</td>--%>
<%--                <td>123456</td>--%>
<%--                <td>8209210299</td>--%>
<%--                <td>用户</td>--%>
<%--                <td class="btns-action">--%>
<%--                    <button class="action-btn">编辑</button>--%>
<%--                    <button class="action-btn">删除</button>--%>
<%--                    <button class="action-btn">详情</button>--%>
<%--                </td>--%>
<%--            </tr>--%>
        </table>

        <div class="nav-bottom">
            <p class="total">共1条</p>
            <a href="#" class="link">上一页</a>
            <p class="current-page">第1页</p>
            <a href="#" class="link">下一页</a>
            <p>跳转到第</p>
            <input type="text" class="target-page">
            <p>页</p>
        </div>
    </div>




</div>
<script src="js/includePage.js"></script>
<script src="js/userManage.js"></script>
</body>
</html>
